<template>
  <div v-loading="loading" class="containers">
    <el-button
      class="back"
      type="primary"
      size="mini"
      @click="back"
    >{{ $t('crud.back') }}</el-button>
    <el-tabs @tab-click="changeContentType">
      <el-tab-pane :label="$t('outbound.autoOut')">
        <div class="table">
          <el-card>
            <div slot="header" class="clearfix">
              <div class="card_header">
                <span>{{ $t('outbound.autoOut') }}</span>
              </div>
            </div>
            <el-form size="small">
              <el-row :gutter="10">
                <el-col :span="5">
                  <el-form-item
                    :label="$t('outbound.workNum')"
                    label-width="90px"
                    prop="workNum"
                  >
                    <el-select
                      v-model.trim="queryInfo_materiel.workNum"
                      clearable
                      filterable
                      no-match-text="1111"
                      :placeholder="$t('Manage.searchPlaceholder11')"
                    >
                      <el-option
                        v-for="(item, index) in workNumOptions"
                        :key="index"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item
                    :label="$t('outbound.processcardCode')"
                    label-width="90px"
                    prop="processcardCode"
                  >
                    <el-select
                      id="selectInput"
                      ref="searchSelect"
                      v-model.trim="queryInfo_materiel.processcardCode"
                      clearable
                      filterable
                      :placeholder="$t('Manage.searchPlaceholder12')"
                      :filter-method="dataFilter"
                      @visible-change="visibleChange"
                      @focus="selectFocus"
                      @blur="selectBlur"
                      @change="selectChange"
                    >
                      <el-option
                        v-for="(item, index) in ProcesscardCodemOptions"
                        :key="index"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="$t('outbound.zoneCode')" label-width="90px" prop="zoneCode">
                    <el-select
                      v-model="queryInfo_materiel.zoneCode"
                      clearable
                      filterable
                      :placeholder="$t('common.selectPlaceholder')"
                    >
                      <el-option
                        v-for="item in dict.warehouse"
                        :key="item.id"
                        :label="item.label"
                        :value="item.label"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="small"
                    @click="getMaterielByCode"
                  >{{ $t('crud.search') }}</el-button>
                </el-col>
              </el-row>
            </el-form>
            <div class="left">
              <el-table
                ref="tableMateriel"
                :data="table_materiel"
                :max-height="tableHeight"
              >
                <!-- <el-table-column type="selection" width="55" :selectable="selectRow" /> -->
                <el-table-column prop="workNum" :label="$t('outbound.workNum')">
                  <template slot-scope="scope">
                    <span>{{ scope.row.workNum }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="processcardCode" :label="$t('outbound.processcardCode')">
                  <template slot-scope="scope">
                    <span>{{ scope.row.processcardCode }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="count" :label="$t('outbound.count')">
                  <template slot-scope="scope">
                    <span>{{ scope.row.count }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="qty" width="140" :label="$t('outbound.qty')">
                  <template slot-scope="scope">
                    <el-input-number
                      :ref="'ref' + scope.$index"
                      v-model.number="scope.row.qty"
                      :disabled="scope.row.count === 0"
                      :min="0"
                      :max="scope.row.count"
                      :controls="false"
                      size="mini"
                      @input.native="
                        operationScoreChange(scope.row, scope.$index)
                      "
                    />
                  </template>
                </el-table-column>
                <!-- 操作区域 -->
                <el-table-column
                  :label="$t('common.operation')"
                  align="center"
                  fixed="right"
                  width="180"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      :disabled="
                        scope.row.qty === 0 ||
                          scope.row.qty === '' ||
                          scope.row.ab === ''
                      "
                      @click="outBoundConfirm(scope.row, 1)"
                    >
                      {{ $t('outbound.createOrder') }}
                    </el-button>
                  </template>
                </el-table-column>
                <div slot="empty" class="empty">
                  <el-empty :description="$t('outbound.empty')" />
                </div>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('outbound.manualOut')">
        <div class="table">
          <el-card v-for="(item, index) in boxList" :key="index" class="area">
            <div slot="header" class="clearfix">
              <div class="card_header">
                <span>{{ index === 0 ? $t('outbound.aSite') : $t('outbound.aSite') }}</span>
              </div>
            </div>
            <div class="card_body">
              <div v-for="(item1, index1) in item" :key="index1" class="row">
                <div
                  v-for="(item2, index2) in item1"
                  :key="index2"
                  class="floor"
                >
                  <el-popover
                    v-for="item3 in item2"
                    :key="item3.id"
                    placement="top-start"
                    trigger="hover"
                    :title="$t('outbound.storageInfo')"
                  >
                    <div>
                      <div>{{ $t('outbound.storageCode2') + item3.storageCode }}</div>
                      <div>
                        {{ $t('outbound.locationInventoryStatus0') +
                          item3.locationInventoryStatus === 1 ? $t('outbound.locationInventoryStatus1') : $t('outbound.locationInventoryStatus2')
                        }}
                      </div>
                      <div>
                        {{ $t('outbound.palletId0') + item3.palletId ? item3.palletId : $t('outbound.palletId1') }}
                      </div>
                      <div>
                        {{ $t('outbound.status0') + item3.status === 1 ? $t('outbound.status1') : $t('outbound.status2') }}
                      </div>

                      <div v-if="item3.processcardCode">
                        {{ $t('outbound.processcardCode0') + item3.processcardCode }}
                      </div>
                      <div v-if="item3.workNum">
                        {{ $t('outbound.workNum0') + item3.workNum }}
                      </div>
                      <div v-if="item3.layerName">
                        {{ $t('outbound.layerName0') + item3.layerName }}
                      </div>
                      <div v-if="item3.size1">{{ $t('outbound.size1') + item3.size1 }}</div>
                      <div v-if="item3.size2">{{ $t('outbound.宽度') + item3.size2 }}</div>
                      <div v-if="item3.thick">{{ $t('outbound.thick') + item3.thick }}</div>
                      <div v-if="item3.qty">{{ $t('outbound.qty1') + item3.qty }}</div>
                    </div>
                    <el-button
                      slot="reference"
                      :type="
                        item3.locationInventoryStatus === 1 ? 'primary' : 'info'
                      "
                      :disabled="item3.status === 0"
                      plain
                      size="mini"
                      @click="outBoundConfirm(item3, 2)"
                    >{{ item3.storageCode }}</el-button>
                  </el-popover>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  createOutBoundOrder,
  getManualOutBound,
  getAllWorkNum,
  getAllProcesscardCode
} from '@/api/outbound'
import { searchStockByMaterial } from '@/api/onbound'
import i18n from '@/lang'

export default {
  dicts: ['warehouse'],
  data() {
    return {
      optionsFilter: [],
      ProcesscardCodemOptions: [],
      workNumOptions: [],
      table_materiel: [],
      tableHeight: window.innerHeight * 0.65,
      queryInfo_materiel: {
        processcardCode: null,
        zoneCode: 'A',
        workNum: null,
        query: {}
      },
      boxList: [],
      boxList1: [],
      loading: false
    }
  },
  created() {
    this.getAllWorkNum()
    this.getAllProcesscardCode()
  },
  methods: {
    selectFocus(e) {
      const value = e.target.value
      setTimeout(() => {
        const input = this.$refs.searchSelect.$children[0].$refs.input
        console.log(1, input.value)
        input.value = value
      })
    },
    selectBlur() {
      // console.log('失去')
    },
    selectChange() {},
    visibleChange(val) {
      console.log(val)
      if (!val) {
        const input = this.$refs.searchSelect.$children[0].$refs.input
        input.blur()
      }
    },
    dataFilter(val) {
      this.queryInfo_materiel.processcardCode = val
      // if (val) {
      //   this.ProcesscardCodemOptions = this.optionsFilter.filter((item) => {
      //     if (
      //       item.label.includes(val) ||
      //       item.label.toUpperCase().includes(val.toUpperCase())
      //     ) {
      //       return true;
      //     }
      //   });
      // } else {
      //   this.ProcesscardCodemOptions = this.optionsFilter;
      // }
    },
    // 工程号模糊查询
    getAllWorkNum() {
      getAllWorkNum().then((res) => {
        this.workNumOptions = res
        console.log(this.workNumOptions)
      })
    },
    // 批次号模糊查询
    getAllProcesscardCode() {
      getAllProcesscardCode().then((res) => {
        this.ProcesscardCodemOptions = res
      })
    },
    // 获取储位信息
    boxShow() {
      getManualOutBound().then((res) => {
        this.boxList = [res.data.data[0]]
      })
    },
    outBoundConfirm(row, type) {
      if (
        row.locationInventoryStatus === undefined ||
        row.locationInventoryStatus === 1
      ) {
        this.$confirm(i18n.t('tipsInfo.outBoundConfirm'), i18n.t('common.tips'), {
          confirmButtonText: i18n.t('crud.confirm'),
          cancelButtonText: i18n.t('crud.cancel'),
          type: 'warning'
        })
          .then(() => {
            this.createOutBoundOrder(row, type)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: i18n.t('common.canceled')
            })
          })
      }
    },
    // 根据工程号创建出库单
    createOutBoundOrder(row, type) {
      let a
      if (type === 1) {
        // 自动
        a = {
          parameterType: type,
          workNum: row.workNum,
          processcardCode: row.processcardCode,
          qty: row.qty,
          zoneCode: this.queryInfo_materiel.zoneCode,
          storageId: null
        }
      } else {
        // 手动
        a = {
          parameterType: 2,
          workNum: null,
          qty: null,
          storageId: row.storageId,
          zoneCode: null
        }
      }
      this.loading = true
      createOutBoundOrder(a)
        .then((res) => {
          if (res.meta.code === 200) {
            this.$message.success(i18n.t('common.createSuccess'))
            this.$router.push('/outboundManagement/outboundOrder')
          } else {
            this.$message.error(res.meta.msg)
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    // tab切换事件
    changeContentType(val) {
      const type = val.index
      if (type === '0') {
        this.getMaterielByCode()
      } else if (type === '1') {
        this.boxShow()
      }
    },
    back() {
      this.$router.back()
    },
    operationScoreChange(row, index) {
      this.$forceUpdate()
      row.qty = this.$refs['ref' + index].displayValue
    },

    // 指定物料获取库存
    getMaterielByCode() {
      searchStockByMaterial({
        workNum:
          this.queryInfo_materiel.workNum === ''
            ? null
            : this.queryInfo_materiel.workNum,
        zoneCode: this.queryInfo_materiel.zoneCode,
        processcardCode:
          this.queryInfo_materiel.processcardCode === ''
            ? null
            : this.queryInfo_materiel.processcardCode
      })
        .then((res) => {
          if (res.meta.code === 200) {
            if (res.meta.msg !== undefined) {
              this.$message.info(res.meta.msg)
            }

            // this.total_materiel = res.data.total.inventoryReport
            this.table_materiel = res.data.inventoryReports.map((v) => {
              v.qty = 0
              return v
            })
          } else {
            this.$message.error(res.meta.msg)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.table {
  display: flex;
  // align-items: center;
  height: 100%;
  justify-content: space-between;

  .el-card {
    width: 100%;
    height: 100%;
    margin: 2px;
    padding: 0;

    .card_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #606266;
      font-weight: bolder;
    }
  }

  .area {
    .card_body {
      .row {
        padding: 20px;

        .floor {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin: 10px 0;
        }
      }
    }
  }
}

.boxList {
  width: 50px;
  margin: 10px;
}

.planWrap {
  width: 440px;
  display: flex;
  flex-wrap: wrap;
}

::v-deep .el-table .cell,
.el-table th > .cell {
  white-space: inherit;
  width: auto;
  // overflow: auto;
}

.containers {
  // margin: 20px;
  height: calc(100% - 15px);

  .el-tabs {
    height: 100%;
    margin: 0 15px 15px 15px;
  }

  ::v-deep .el-tabs__content {
    position: inherit;
    height: calc(100% - 55px);
  }

  .el-tab-pane {
    height: 100%;
  }

  .back {
    position: absolute;
    right: 2%;
    top: 8%;
    z-index: 999;
  }
}
</style>
